import React from "react";
import { useNavigate } from "react-router-dom";
import { connect } from "react-redux";
import { Button, Form, Input, message } from "antd";
import {
  EyeTwoTone,
  EyeInvisibleOutlined,
  UserOutlined,
  LockOutlined,
} from "@ant-design/icons";
import axios from "axios";
import Particles from "react-tsparticles";
import "./Login.css";

function Login(props) {
  const navigate = useNavigate();

  const onFinish = async (values) => {
    console.log(values);
    const { data } = await axios(
      `/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`
    );
    if (data.length) {
      localStorage.setItem("user", JSON.stringify(data[0]));
      props.changeLogin();
      navigate("/", { replace: true });
    } else {
      message.error("用户名或密码错误");
    }
  };

  return (
    <div
      style={{
        background: "rgb(35,39,65)",
        height: "100vh",
        overflow: "hidden",
      }}
    >
      <Particles
        id="tsparticles"
        options={{
          background: {
            color: {
              value: "#0d47a1",
            },
          },
          fpsLimit: 120,
          interactivity: {
            events: {
              onClick: {
                enable: true,
                mode: "push",
              },
              onHover: {
                enable: true,
                mode: "repulse",
              },
              resize: true,
            },
            modes: {
              bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 40,
              },
              push: {
                quantity: 4,
              },
              repulse: {
                distance: 200,
                duration: 0.4,
              },
            },
          },
          particles: {
            color: {
              value: "#ffffff",
            },
            links: {
              color: "#ffffff",
              distance: 150,
              enable: true,
              opacity: 0.5,
              width: 1,
            },
            collisions: {
              enable: true,
            },
            move: {
              direction: "none",
              enable: true,
              outMode: "bounce",
              random: false,
              speed: 6,
              straight: false,
            },
            number: {
              density: {
                enable: true,
                area: 800,
              },
              value: 80,
            },
            opacity: {
              value: 0.5,
            },
            shape: {
              type: "circle",
            },
            size: {
              random: true,
              value: 5,
            },
          },
          detectRetina: true,
        }}
      />
      <div className="formContainer">
        <div className="login-title">React Admin</div>
        <Form name="login" onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input prefix={<UserOutlined />} placeholder="请输入用户名"></Input>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input.Password
              prefix={<LockOutlined />}
              autoComplete="on"
              placeholder="请输入密码"
              iconRender={(visible) =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
            ></Input.Password>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}

const mapStateToProps = () => {
  return {};
};

const mapDispatchToProps = {
  changeLogin() {
    return {
      type: "change_Login",
      payload: true,
    };
  },
};

export default connect(mapStateToProps, mapDispatchToProps)(Login);
